<template>
  <div class=" login-container f-c-c">
    <div class="title">水电监控管理平台</div>

    <div class="login ">
      <BorderBox8>
        <BorderBox7 :color="['#163661', '#fff']" backgroundColor="rgba(255,255,255,0)">
          <div class="f-c-c">
            <div class="subTitle">
              <img alt="" src="../assets/image/login/UnionLeft.png"/>
              <div style="margin: 0 20px">用户登录</div>
              <img alt="" src="../assets/image/login/UnionRight.png"/>
            </div>
            <el-form ref="formRef" :model="formData" :rules="rules">
              <div class="username">
                <div class="image">
                  <img alt="" src="../assets/image/login/account.png"/>
                </div>
                <el-form-item class="content" prop="username">
                  <el-input v-model="formData.username" placeholder="请输入账号" type="text"/>
                </el-form-item>
              </div>
              <div class="password">
                <div class="image">
                  <img alt="" src="../assets/image/login/pw.png"/>
                </div>
                <el-form-item class="content" prop="password">
                  <el-input v-model="formData.password" placeholder="请输入密码" show-password type="password"/>
                </el-form-item>
              </div>
            </el-form>
            <div class="submit" @click="login">登录</div>
          </div>
        </BorderBox7>
      </BorderBox8>
    </div>

  </div>
</template>

<script setup>
import {getCurrentInstance, ref} from 'vue'
import {BorderBox7, BorderBox8} from '@kjgl77/datav-vue3'
import md5 from 'js-md5'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'


const router = useRouter()
const {proxy} = getCurrentInstance()
const formData = ref({
  username: '',
  password: ''
})
const rules = {
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
}

const formRef = ref()
let login = async () => {
  formRef.value.validate(async (valid) => {
    console.log('valid', valid)
    if (valid) {
      let res = await proxy.$https.login({
        username: formData.value.username,
        password: md5(formData.value.password)
      })
      console.log('login', res)
      ElMessage({
        message: '登录成功',
        type: 'success'
      })
      sessionStorage.setItem('token', res.data)
      router.push('/home')
    }
  })


}


</script>

<style lang='scss'>
.el-input__wrapper {
  flex: 1;
  background-color: transparent;
  //box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.1) inset;
  box-shadow: none;

  .el-input__inner {
    color: #FFFFFF;
    height: 50px;
  }

  .el-input--suffix {
    height: 100%;
  }

  .el-input__password {
    font-size: 20px !important;
  }
}

.el-input__wrapper.is-focus,
.el-input__wrapper:hover {
  border: none;
  box-shadow: none;
}

.el-form-item.is-error .el-form-item__content .el-input__wrapper {
  box-shadow: none;

  &.is-focus,
  &:hover {
    box-shadow: none;
  }
}

.el-form-item__error {
  margin-top: 4px;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 9000s ease-in-out 0s;
}

.border-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

html, body, #app {
  display: flex;
  width: 100%;
  height: 100%;
}

.login-container {
  flex: 1;
  height: 100%;
  background-image: url('../assets/image/login/bgImage.png');
  background-size: cover;

  .title {
    font-size: 75px;
    font-weight: 700;
    line-height: 105px;
    //文字渐变
    background: linear-gradient(180deg, #FFF 27.63%, #1481FF 80.7%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  }

  .login {
    color: #FFF;
    width: 650px;
    height: 430px;
    background: rgba(1, 20, 55, 0.74);
    box-shadow: 6px 6px 21.3px 0 rgba(0, 17, 51, 0.61);
    margin-top: 20px;

    .subTitle {
      display: flex;
      align-items: center;
      font-weight: 700;
      font-size: 30px;
      letter-spacing: 3.3px;

      img {
        width: 30px;
        height: 20px;
      }
    }

    .username,
    .password {
      display: flex;
      align-items: center;
      width: 400px;
      height: 100%;
      margin-top: 20px;
      border: 1px solid #1BB3FF;

      .image {
        padding: 10px;
        border-right: 1px solid #1BB3FF;
        background: rgba(40, 140, 254, 0.29);

        img {
          width: 32px;
          height: 32px;
        }
      }

      .content {
        flex: 1;
        margin-bottom: 0px;
      }
    }

    .submit {
      width: 400px;
      box-sizing: content-box;
      background: rgba(56, 157, 254, 0.80);
      color: #fff;
      font-size: 25px;
      line-height: 55px;
      text-align: center;
      margin-top: 55px;
    }
  }
}

.f-c-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
